<!DOCTYPE html>
<html>

<head>
    <title>3d立方体</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <audio autoplay="autoplay" loop="loop"><source src="bgmusic.mp3"></audio>
    <style>
        body {
            background-image: url(leaf.jpg);
            background-size: 100% 1615px;
            background-position: 50% 50%;
            /*background-color: black;*/
            height: 100%;
            /*布局方式：弹性布局*/
            display: flex;
            /*水平布局方式*/
            justify-content: center;
            /*垂直布局方式*/
            align-items: center;
            /*3d观察视角*/
            perspective: 1100px;
            /*position: relative;*/
        }
        /*#banner {
            width: 100%;
            height: 2000px;
            position: fixed;
            top: 0;
            left: 0;
            z-index: -1;
            background-image: url(leaf.jpg);
            background-position: 50% 50%;
        }
        */
        
        .move {
            text-align: center;
            line-height: 45px;
            width: 320px;
            height: 50px;
            border: 1px solid black;
            border-radius: 5px;
            background-color: red;
            animation: person 10s linear;
            animation-iteration-count: infinite;
            position: fixed;
            top: 200px;
            left: -4px;
        }
        
        .text {
            text-align: center;
            line-height: 45px;
            width: 320px;
            height: 50px;
            border: 1px solid black;
            border-radius: 5px;
            position: absolute;
        }
        
        #skyblue {
            background-color: skyblue;
            top: 300px;
            left: 0;
        }
        
        #yellow {
            background-color: yellow;
            top: 300px;
            right: 0;
        }
        
        #green {
            background-color: green;
            top: 400px;
            left: 0;
        }
        
        #cyan {
            background-color: cyan;
            top: 400px;
            right: 0;
        }
        
        #orange {
            background-color: orange;
            top: 500px;
            left: 0;
        }
        
        #pink {
            background-color: pink;
            top: 500px;
            right: 0;
        }
        
        #red {
            background-color: red;
            top: 600px;
            left: 0;
        }
        
        #white {
            background-color: white;
            top: 600px;
            right: 0;
            font-size: 15px;
            line-height: 24px;
        }
        
        @keyframes person {
            0% {
                background: red;
                left: 0px;
                top: 130px;
            }
            20% {
                background: pink;
                left: 316px;
                top: 140px;
            }
            40% {
                background-color: white;
                left: 632px;
                top: 130px;
            }
            60% {
                background-color: green;
                left: 948px;
                top: 140px;
            }
            80% {
                background: brown;
                left: 1264px;
                top: 130px;
            }
            100% {
                background: blue;
                left: 1565px;
                top: 140px;
            }
        }
        
        main {
            width: 300px;
            height: 300px;
            position: relative;
            top: 310px;
            /*子元素是否保持3d变形*/
            transform-style: preserve-3d;
            /*动画名称，持续时间，速率匀速*/
            animation: spin 10s linear;
            /*动画次数 infinite无穷的*/
            animation-iteration-count: infinite;
        }
        
        img {
            width: 300px;
            height: 300px;
            /*定位方式：绝对定位*/
            position: absolute;
        }
        /*选择器*/
        
        #top {
            /*变形，translate:平移, rotate：旋转，scale：缩放*/
            transform: translateY(-150px) rotateX(90deg);
        }
        
        #bottom {
            transform: translateY(150px) rotateX(90deg);
        }
        
        #left {
            transform: translateX(-150px) rotateY(90deg);
        }
        
        #right {
            transform: translateX(150px) rotateY(90deg);
        }
        
        #front {
            transform: translateZ(150px);
        }
        
        #back {
            transform: translateZ(-150px);
        }
        /*keyframes:创建css动画*/
        
        @keyframes spin {
            /*第0帧*/
            0% {
                transform: rotateY(0deg) rotateX(0);
            }
            50% {
                transform: rotateY(360deg) rotateX(0deg);
            }
            100% {
                transform: rotateY(360deg) rotateX(360deg);
            }
        }
        
        #container {
            margin: 0px auto;
            width: 400px;
            position: absolute;
            top: 958px;
        }
        /*.show-img {
            width: 100%;
            height: 600px;
        }*/
        
        #inner1 {
            width: 100%;
            height: 500px;
            background-image: url(1.jpg);
            background-size: 100% 100%;
            border-radius: 50%;
        }
        
        #inner2 {
            width: 100%;
            height: 500px;
            background-image: url(2.jpg);
            background-size: 100% 100%;
            border-radius: 50%;
        }
        
        #inner3 {
            width: 100%;
            height: 500px;
            background-image: url(3.jpg);
            background-size: 100% 100%;
            border-radius: 50%;
        }
        
        #inner4 {
            width: 100%;
            height: 500px;
            background-image: url(4.jpg);
            background-size: 100% 100%;
            border-radius: 50%;
        }
        
        #inner5 {
            width: 100%;
            height: 500px;
            background-image: url(flower.jpg);
            background-size: 100% 100%;
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <div id="banner"></div>

    <div class="move">
        Hello...Hello...Hello...我是崔燕华。
    </div>
    <div class="text" id="skyblue">
        This is my mother——崔燕华。
    </div>
    <div class="text" id="yellow">
        崔燕华是一位发型设计师。
    </div>
    <div class="text" id="green">
        崔燕华出生于1969年，生肖属鸡。
    </div>
    <div class="text" id="cyan">
        希望崔燕华身体健康，天天开心。
    </div>
    <div class="text" id="orange">
        预祝崔燕华工作顺利，生意兴隆。
    </div>
    <div class="text" id="pink">
        希望崔燕华越活越年轻。
    </div>
    <div class="text" id="red">
        希望崔燕华心想事成，万事如意。
    </div>
    <div class="text" id="white">
        希望崔燕华的daughter四个月后能找到一份好工作。
    </div>
    <main>
        <img src="01.jpg" alt="" id="top">
        <img src="05.jpg" alt="" id="bottom">
        <img src="03.jpg" alt="" id="left">
        <img src="04.jpg" alt="" id="right">
        <img src="02.jpg" alt="" id="front">
        <img src="06.jpg" alt="" id="back">
    </main>
    <div id="container">
        <div id="inner1"></div>
        <div id="inner2"></div>
        <div id="inner3"></div>
        <div id="inner4"></div>
        <div id="inner5"><img class="show-img" src="5.jpg" alt=""></div>

    </div>
</body>

</html>